<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
      xmlns:c="http://java.sun.com/jsp/jstl/core"  
      xmlns:rich="http://richfaces.org/rich"
      >
     <ui:composition>
     	<a4j:form ajaxSubmit="true" reRender="cart_panel">
			<div id="shopping_cart">
				<div class="sidebars">
					<div class="t">
						<div></div>
					</div>
					<div class="i">
						<div class="i2">
							<div class="c">
								<div>
									<rich:panel id="cart_panel" header="Shopping Cart">
										<h:outputText value="You haven't ordered anything yet." rendered="#{shoppingCartBacking.shoppingCart.serviceNum == 0}"/>
										<h:outputText value="You have ordered #{shoppingCartBacking.shoppingCart.serviceNum} services with total \$#{shoppingCartBacking.shoppingCart.total}" 
											rendered="#{shoppingCartBacking.shoppingCart.serviceNum > 0}"/>
										<rich:dataTable value="#{shoppingCartBacking.shoppingCart.orderedItems}" var="orderedItem" rendered="#{shoppingCartBacking.shoppingCart.serviceNum > 0}">
							                <rich:column>
									        	<f:facet name="header">Service Name</f:facet>
									           	<h:outputText value="#{orderedItem.service.serviceName}"/>
									        </rich:column>
									
									        <rich:column>
												<f:facet name="header">Price</f:facet>
									           	<h:outputText value="#{orderedItem.service.totalPrice}"/>
									        </rich:column>
										</rich:dataTable>
									</rich:panel>
									<h:form>
										<h:commandButton value="Check Out" action="#{ShoppingCartBacking.checkout}" rendered="#{shoppingCartBacking.shoppingCart.serviceNum > 0}"/>
									</h:form>
								</div>

								<div class="clear"></div>
							</div>
						</div>
					</div>
					<div class="b"><div></div></div>
				</div>
			</div>
		</a4j:form>
	</ui:composition>
</html>